<template>
	<div class="question-container">
		<div class="question_title">自测学习闯关</div>
		<div class="period">
			<div class="period_status">
				<el-row :gutter="0" align="middle" type="flex" justify="space-between" style="width:100%">
					<el-col v-for="(item,index) in passGameInfo.checkPointSet" :key="index">
						<div class="period_div" :title="passGameInfo.curCheckPointId>=item.honorId && tips" 
							:style="backgroundImgById(item, index)" @click="(index <= curIndex) && openPeriod(item.checkPointId)">
							<div class="period-img"></div>
							<div class="period-finish" v-if="index < curIndex">已通关</div>
							<div class="period-locktext" v-if="index > curIndex">未解锁</div>
							<!--进行中的关卡-->
							<template v-if="index == curIndex">
								<div class="period-num">{{item.solvedTitleNum}}/{{item.totalTitleNum}}</div>
								<el-progress :stroke-width=8 :percentage="item.totalTitleNum?item.solvedTitleNum/item.totalTitleNum*100:0" :show-text=false color="#28acff"></el-progress>
							</template>
							<div class="period_div_highlight" v-if="checkPointId == item.checkPointId"></div>
						</div>
					</el-col>
				</el-row>
			</div>
			<div class="period_step">
				<el-steps :active="parseInt(passGameInfo.curHonorId)" align-center>
					<el-step v-for="(item,index) in passGameInfo.checkPointSet" :key="index" :title="item.checkPointName" description=""></el-step>
				</el-steps>
			</div>
		</div>
		<div class="question-content">
			<template v-for="(item,index) in questionList">
				<div v-for="questionItem in item.data" class="question-content-item">
					<div class="question-content-item-title">{{questionItem.childrenName}}</div>
					<div :class="[checkFinished(questionItem.data)?'question-content-item-div-finish':(computeQuestionItemPercent(questionItem.data)==0?'question-content-item-div-notstart':'question-content-item-div-ing')]" @click="handleQuestionItemClick(questionItem.data,questionItem.childrenName+':'+item.childrenName)">
						<div class="question-content-item-bigtitle">{{item.childrenName}}</div>
						<div v-if="computeQuestionItemPercent(questionItem.data)!=0" class="question-content-item-process">
							<div class="question-content-item-process-icon"></div>
							<label style="display: inline-block;">任务完成：</label>
							<label v-if="checkFinished(questionItem.data)">{{questionItem.updatedTime}}</label>
							<el-progress v-if="computeQuestionItemPercent(questionItem.data)!=0 && !checkFinished(questionItem.data)" class="question-content-item-process-progress" color="#32d376" :stroke-width=8 :percentage="computeQuestionItemPercent(questionItem.data)"></el-progress>
						</div>
						<div v-if="checkFinished(questionItem.data)" class="question-content-item-status"></div>
						<div class="question-content-item-connect" @click.stop="handleConnectClick()"></div>
					</div>
					<div v-if="checkHasFileUrl(questionItem.data)" class="question-content-item-file">
						<span v-if="!questionItem.downTime">文件下载：未下载</span>
						<span v-else>文件下载：{{questionItem.downTime}}</span>
					</div>
				</div>
			</template>
		</div>
		<!--  <div v-if="checkCommitBtnShow()" class="commit-btn" @click="commitResult()">提交</div> -->
		<answerQuestionContent ref="answerQuestionContent"></answerQuestionContent>
		<answerDialogPass ref="answerDialogPass"></answerDialogPass>
		<answerDialogCommit ref="answerDialogCommit"></answerDialogCommit>
		<noPublish ref="noPublish"></noPublish>
		<!-- <answerDialogDown ref="answerDialogDown"></answerDialogDown> -->
	</div>
</template>
<script>
	import answerQuestionContent from './subpage/answer_question_content'
	import answerDialogPass from './subpage/answer_dialog_pass'
	import answerDialogCommit from './subpage/answer_dialog_commit'
	import answerDialogDown from './subpage/answer_dialog_down'
	import noPublish from "./subpage/no_publish";
	var vm, user;

	export default {
		components: {
			answerQuestionContent,
			answerDialogPass,
			answerDialogCommit,
			answerDialogDown,
			noPublish
		},
		data: function() {
			return {
				tips: "点击查看",
				questionList: [],
				passGameInfo: { //当前用户等级信息
					userId: '',
					userName: '',
					curCheckPointId: '1',
					curCheckPointName: '筹备期',
					curHonorId: '1',
					curHonorName: '青铜',
					solvedTitleNum: 21,
					totalTitleNum: 180,
					topNum: 3,
					checkPointSet: [],
				},
				curIndex: -1,
				checkPointId: null
			}
		},
		methods: {
			backgroundImgById: function(item, index) {
				//根据序号判断是否完成,设置图片前缀
				let prefix = "period_unlock_bg";
				if(index < vm.curIndex) {
					prefix = "period_finish";
				}
				if(index > vm.curIndex) {
					prefix = "period_lock_bg";
				}
				//获取图片
				let img = require('@/assets/img/answer_system/' + prefix + item.honorId + '.png');
				//返回背景样式
				return { backgroundImage: 'url(' + img + ')' }
			},
			checkFinished: function(data) {
				for(let i = 0; i < data.length; i++) {
					if(!data[i].isSel) {
						return false;
					}
				}
				return true;
			},
			checkHasFileUrl: function(data) {
				for(let i = 0; i < data.length; i++) {
					if(data[i].isHasFile) {
						return true;
					}
				}
				return false;
			},
			computeQuestionItemPercent: function(data) {
				var count = 0;
				for(let i = 0; i < data.length; i++) {
					if(data[i].isSel) {
						count++;
					}
				}
				if(data.length == 0)
					return 100;
				if(count == data.length) {
					return 100;
				} else {
					return Math.round(count / data.length * 100);
				}
			},
			openPeriod: function(id) {
				vm.checkPointId = id;
				
				let param = {
					userId: vm.passGameInfo.userId,
					evaItemId: id,
					evaTypeId: vm.passGameInfo.evaTypeId
				}
				//向后台获取状态
				api.passGameQuestionList(param).then(function(data) {
					vm.questionList = data.list;
					for(let i = 0; i < vm.questionList.length; i++) {
						let data = vm.questionList[i].data;
						for(let j = 0; j < data.length; j++) {
							let dataarr = data[j].data;
							for(let k = 0; k < dataarr.length; k++) {
								dataarr[k].isEditor = dataarr[k].isSel;
							}
						}

					}
				});
			},
			handleQuestionItemClick: function(item, title) {
				var obj = tool.clone(item);
				vm.$refs.answerQuestionContent.init(obj, title, true);
			},
			handleConnectClick: function() {
				// e.stopPropagation();
			},
			commitResult: function(titleSet) {
				//过滤
				let list = {
					userId: vm.passGameInfo.userId,
					orgId: user.orgId,
					titleSet: titleSet
				};
				api.passGameSave(list).then(function(data) {
					//如果当前荣誉Id比之前的大
					if(data.curHonorId > vm.passGameInfo.curHonorId) {
						//说明进阶到下一阶段,打开通关恭喜弹窗,打开新的阶段
						vm.openPassDialog(data);
						vm.setCurIndex(data);
					}
					//打开当前选中的阶段
					vm.openPeriod(vm.checkPointId);
					vm.passGameInfo = data;
				});
			},
			openPassDialog: function(passGameInfo) {
				vm.$refs.answerDialogPass.init(passGameInfo.curHonorId, passGameInfo.curHonorName);
			},
			openCommitDialog: function() {
				var param = vm.passGameInfo.curCheckPointName + ' ';
				var index = vm.passGameInfo.checkPointSet.findIndex(d => d.checkPointId === vm.passGameInfo.curCheckPointId);
				param += vm.passGameInfo.checkPointSet[index].solvedTitleNum;
				param += "/";
				param += vm.passGameInfo.checkPointSet[index].totalTitleNum;
				vm.$refs.answerDialogCommit.init(param);
			},
			setCurIndex : function(data) {
				//记录阶段Id数组
				let ids = [];
				data.checkPointSet.forEach(function(item) {
					ids.push(item.checkPointId);
				});
				//当前关卡序号
				vm.curIndex = ids.indexOf(data.curCheckPointId);
				
				if(vm.curIndex >= 0) {
					//还未全部通关,设置新的当前关卡id
					vm.checkPointId = data.curCheckPointId;
				} else {
					//当前序号不在序号数组里,代表全部通关
					vm.curIndex = ids.length;
				}
			}
		},
		created: function() {
			vm = this;
			user = tool.getItem(lsKey.user, true);
		},
		updated: function() {
			this.$nextTick(function() {
				//  alert('v-for渲染已经完成')
				// vm.computeQuestionPercent(-1);
			})
			// console.log("1==***************************我会先执行");

		},
		mounted: function() {

			let param = {
				userId: user.userId,
				orgId: user.orgId
			}
			api.passGameInfo(param).then(function(data) {
				//没发布
				if(data.published == "0") {
					vm.$refs.noPublish.init();
					return false;
				}
				//设置当前阶段序号
				vm.setCurIndex(data);
				vm.passGameInfo = data;
				//请求题目
				vm.openPeriod(vm.$route.query.checkPointId);
			});
			
			

		}
	}
</script>
<style lang="scss">
	.question-container {
		.period_status .el-progress {
			postion: relative;
			width: 54%;
			margin: 0 auto;
			top: 0.42rem
			/*0.42rem*/
			;
		}
		.el-progress-bar__outer {
			border: 0.01rem solid rgba(102, 102, 102, 0.1);
			background-color: #f3f6fc;
		}
		.question-content-item-process-progress .el-progress-bar__outer {
			border: 0.01rem solid rgba(102, 102, 102, 0.1);
			background-color: #f3f6fc;
		}
		.el-step__head.is-finish {
			color: #3885f8;
			border-color: #3885f8;
		}
		.el-step__title.is-finish {
			color: rgb(51, 51, 51);
		}
		.el-step__title.is-wait {
			color: rgb(102, 102, 102);
		}
		.el-steps--horizontal {
			margin-top: 0.15rem;
		}
		.el-step.is-horizontal .el-step__line {
			height: 0.08rem;
			border: 0.01rem solid rgba(102, 102, 102, 0.1);
			background-color: transparent;
			/*box-shadow: 0rem 0rem 0.15rem -0.032rem #0f7845;*/
		}
		.el-step__line-inner {
			height: 0.02rem;
			background-color: #3885f8;
			margin-top: 0.02rem;
		}
		.el-step__icon.is-text {
			border: 0.03rem solid white;
			box-shadow: 0rem 0rem 0.15rem -0.04rem #3885f8;
			background-color: #d3e1ea;
		}
		.is-finish .el-step__icon.is-text {
			background-color: #3885f8;
			color: white;
		}
		.el-checkbox__input .el-checkbox__inner {
			width: 0.22rem;
			height: 0.22rem;
		}
		.el-checkbox__input.is-checked .el-checkbox__inner {
			background-color: rgb(56, 133, 248);
		}
		.el-checkbox__inner::after {
			left: 0.08rem;
			top: 0.05rem;
		}
		.el-checkbox__label {
			font-size: 0.22rem;
			color: rgb(102, 102, 102);
			display: inline-grid;
			white-space: pre-wrap;
			line-height: 0.3rem;
		}
		.is-checked .el-checkbox__label {
			color: rgb(102, 102, 102);
		}
		.period_div_highlight {
			position: absolute;
			width: 100%;
			height: 100%;
			background-image: url(~@/assets/img/answer_system/highlight_bg.png);
			background-repeat: no-repeat;
			background-position: center top;
			background-size: 78% 78%;
			margin: 0 auto;
			top: 0rem;
			z-index: 2;
		}
	}
</style>
<style scoped>
	.question-container {
		padding-top: 0.27rem;
		padding-left: 0.69rem;
		padding-right: 0.69rem;
		background-color: #f3f6fc;
	}
	
	.question_title {
		font-size: 0.26rem;
		color: rgb(20, 20, 20);
		font-weight: bold;
		background-color: #f3f6fc;
		margin-left: 0.05rem;
		font-stretch: normal;
		line-height: 0.3rem;
		letter-spacing: 0.03rem;
		color: #141414;
	}
	
	.period {
		overflow: hidden;
		width: 15.46rem;
		height: 2.59rem;
		margin: 0 auto;
		margin-top: 0.16rem;
		background-color: #ffffff;
		border: 0.01rem solid #ededed;
		border-radius: 0.1rem;
		box-shadow: 0rem 0.01rem 0.38rem 0rem rgba(18, 151, 81, 0.08);
	}
	
	.period_status {
		overflow: hidden;
		width: 86%;
		height: 1.5rem;
		margin: 0 auto;
		margin-top: 0.05rem;
		display: flex;
		flex: 1;
	}
	
	.period_div {
		position: relative;
		width: 1.5rem;
		height: 1.5rem;
		/*float: left;*/
		text-align: center;
		font-size: 0.18rem;
		/*padding: 0.2rem;*/
		border: none;
		/*background-image: url(../../assets/img/answer_system/period_bg.png);*/
		background-repeat: no-repeat;
		background-position: center top
		/*0.15rem*/
		;
		background-size: 78% 78%
		/*75% 75%*/
		;
		cursor: pointer;
		margin: 0 auto;
	}
	
	.period-img {
		position: relative;
		width: 0.7rem;
		height: 0.7rem;
		/*background-image: url(../../assets/img/answer_system/period_level_1.png);*/
		background-size: 100% 100%;
		margin: 0 auto;
		top: 0.22rem;
	}
	
	.period-finish {
		position: relative;
		width: 100%;
		top: 0.35rem;
		height: 0.5rem;
		text-align: center;
		line-height: .5rem;
		color: #FF7A01;
		font-weight: bold;
	}
	
	.period-locktext {
		position: relative;
		width: 100%;
		top: 0.35rem;
		height: 0.5rem;
		text-align: center;
		line-height: .5rem;
		color: #343331;
		font-weight: bold;
	}
	
	.period-num {
		position: relative;
		width: 60%;
		margin: 0 auto;
		top: 0.42rem
		/*0.42rem*/
		;
		color: rgb(51, 51, 51);
		font-size: 0.12rem;
	}
	
	.period-lock {
		position: relative;
		width: 0.2rem;
		height: 0.22rem;
		background-image: url(../../assets/img/answer_system/period_lock.png);
		background-size: 100% 100%;
		float: right;
		bottom: 0.02rem;
	}
	
	.period_step {
		position: relative;
		overflow: hidden;
		width: 86%;
		margin: 0 auto;
		/*margin-top: 0rem;*/
		font-size: 0.2rem;
		color: rgb(51, 51, 51);
		bottom: 0.1rem;
	}
	
	.period-choose {
		position: absolute;
		background-color: rgba(59, 178, 184, 0.5);
		height: 0.02rem;
		border: none;
		width: calc(1.6rem + 0.55rem);
		margin-top: 1.1rem;
		display: none;
	}
	
	.period_div .period-item:last-child .period-choose {
		width: 1.6rem;
	}
	/*.question-content {
  width: 15.46rem;
  min-height: 8.92rem;
  margin: 0 auto;
  margin-top: 0.21rem;
  margin-bottom: 0.37rem;
  background-color: #ffffff;
  border-radius: 10px;
  border: solid 1px #ededed;
  box-shadow: 0rem 0.03rem 0.12rem -0.10rem #0f7845;
  padding: 0.37rem 2rem;
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:flex-end;
  align-content:flex-end;
}*/
	
	.question-content {
		width: 15.46rem;
		min-height: 8.92rem;
		margin: 0 auto;
		margin-top: 0.21rem;
		margin-bottom: 0.37rem;
		background-color: #ffffff;
		border-radius: 10px;
		border: solid 1px #ededed;
		/*box-shadow: 0rem 0.03rem 0.12rem -0.10rem #0f7845;*/
		padding: 0.37rem 2rem;
		display: grid;
		grid-template-columns: 33.33% 33.33% 33.33%;
		grid-template-rows: 2.19rem;
		/*justify-content:start;*/
		grid-auto-flow: row dense;
		grid-auto-rows: 2.19rem;
	}
	
	.question-content-item {
		width: 3.17rem;
		height: 2.19rem;
		margin: 0 auto;
	}
	
	.question-content .question-content-item:nth-child(6n) {
		grid-column: 1;
	}
	
	.question-content .question-content-item:nth-child(6n-2) {
		grid-column: 3;
	}
	
	.question-content .question-content-item:nth-child(6n-1) {
		grid-column: 2;
	}
	
	.question-content-item-title {
		font-size: 0.18rem;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rem;
		color: #222325;
		margin: 0 auto;
		text-align: center;
	}
	
	.question-content-item-div-finish,
	.question-content-item-div-ing,
	.question-content-item-div-notstart {
		width: 2.8rem;
		height: 0.9rem;
		margin: 0 auto;
		background-color: #dae4f5;
		border: 0.01rem solid #cfdcf4;
		border-radius: 0rem 0.2rem 0.2rem 0.2rem;
		/*box-shadow: 0rem 0.04rem 0.1rem 0rem rgba(101, 144, 208, 0.15);*/
		box-shadow: 0rem 0.08rem 0.20rem 0rem rgba(101, 144, 208, 0.3);
		cursor: pointer;
		position: relative;
	}
	
	.question-content-item-div-finish {
		box-shadow: 0rem 0.08rem 0.20rem 0rem rgba(101, 144, 208, 0.3);
		background-color: #73e9a8;
		background-image: url(../../assets/img/answer_system/question_item_green.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
	}
	
	.question-content-item-div-ing {
		background-image: linear-gradient(180deg, #ffad7b 0%, #fe7c59 100%), linear-gradient(#fe777e, #fe777e);
		background-blend-mode: normal, normal;
		box-shadow: 0px 8px 20px 0px rgba(101, 144, 208, 0.3);
	}
	
	.question-content-item-div-notstart {
		background-color: #dae4f5;
		box-shadow: 0px 4px 10px 0px rgba(101, 144, 208, 0.15);
		background-image: url(../../assets/img/answer_system/question_item_grey.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
	}
	
	.question-content-item-bigtitle {
		font-size: 0.24rem;
		font-weight: bold;
		font-stretch: normal;
		letter-spacing: 0rem;
		color: #ffffff;
		padding-left: 0.19rem;
		margin-top: 0.16rem;
		margin-bottom: 0.06rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.question-content-item-process {
		font-size: 0.18rem;
		font-stretch: normal;
		letter-spacing: 0rem;
		color: #ffffff;
		padding-left: 0.19rem;
		/*margin-top: 0.24rem;*/
	}
	
	.question-content-item-process-icon {
		width: 0.23rem;
		height: 0.18rem;
		background-image: url(../../assets/img/answer_system/file_icon.png);
		background-repeat: no-repeat;
		background-position: center center;
		/*background-size: 100% 100%;*/
		display: inline-block;
		position: relative;
		top: 0.03rem;
	}
	
	.question-content-item-process-progress {
		width: 1.1rem;
		height: 0.12rem;
		display: inline-block;
		position: relative;
		margin-top: 0rem;
	}
	
	.question-content-item-status {
		width: 0.4rem;
		height: 0.4rem;
		background-image: url(../../assets/img/answer_system/finish_icon.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
		display: inline-block;
		/*float: right;*/
		position: absolute;
		top: 0.25rem;
		right: -0.2rem;
		z-index: 1;
	}
	
	.question-content-item-file {
		font-size: 0.16rem;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rem;
		color: #626262;
		padding-left: 0.3rem;
		padding-top: 0.06rem;
	}
	
	.question-content-item-connect {
		width: 1.0rem;
		height: 0.02rem;
		background-image: url(../../assets/img/answer_system/connect_line.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
		display: inline-block;
		position: absolute;
		top: 0.44rem;
		right: -1rem;
		z-index: 0;
		cursor: default;
	}
	
	.question-content .question-content-item:nth-child(3n) .question-content-item-connect {
		width: 0.96rem;
		height: 2.23rem;
		background-image: url(../../assets/img/answer_system/connect_curve.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
	}
	
	.question-content .question-content-item:nth-child(6n) .question-content-item-connect {
		width: 0.96rem;
		height: 2.23rem;
		background-image: url(../../assets/img/answer_system/connect_curve.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
		left: -0.96rem;
		-moz-transform: scaleX(-1);
		-webkit-transform: scaleX(-1);
		-o-transform: scaleX(-1);
		transform: scaleX(-1);
		/*IE*/
		filter: FlipH;
	}
	
	.question-content .question-content-item:nth-child(6n-1) .question-content-item-connect,
	.question-content .question-content-item:nth-child(6n-2) .question-content-item-connect {
		background-image: url(../../assets/img/answer_system/connect_line.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
		left: -1rem;
		-moz-transform: scaleX(-1);
		-webkit-transform: scaleX(-1);
		-o-transform: scaleX(-1);
		transform: scaleX(-1);
		/*IE*/
		filter: FlipH;
	}
	
	.question-content .question-content-item:last-child .question-content-item-connect {
		display: none;
	}
</style>